<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <!-- /.box-header -->
      <div class="box-body">
        <form class="form-inline" style="margin-top: 5px;margin-bottom: 20px;background:white;">
          <div class="form-group col-lg-12">
            <button type="button" (click)="xuyue()" class="btn btn-primary"><i class="fa fa-check-square-o"></i>续约</button>
            <button type="button" (click)="zhongzhi()" class="btn btn-primary"><i class="glyphicon glyphicon-stop"></i>&nbsp;终止合同</button>
            <button type="button" (click)="stopCheck()" class="btn btn-primary"><i class="glyphicon glyphicon-stop"></i>&nbsp;终止审核</button>
          </div>
          <div class="form-group" style="margin-top:10px;margin-left:15px">
            <label class="text-right">产品代码</label>

            <input class="form-control form-fields" type="text" value="产品代码">
            <label class="text-right">产品名称</label>

            <input class="form-control form-fields" type="text" value="产品名称">

            <label class="control-label">到期日:</label>
            <div class="input-group date form_datetime">
              <span class="input-group-addon">
                <i class="fa fa-calendar"></i>
              </span>
              <input class="form-control" type="date" style="background: white; cursor: pointer;" value="2013-03-04">
            </div>
            <!--<div class="input-group date form_datetime">
              <input class="form-control" type="date" readonly="" style="background: white; cursor: pointer;" value="2013-03-04">
              <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> -->
            <!-- <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>-->
            <button type="button" class="btn btn-primary"><i class="fa fa-search"></i>查询</button>

          </div>


        </form>
        <div style="overflow-x:scroll;width:100%">
          <table id="example2" class="table table-bordered table-hover table-keep-line table-striped" style="margin-top:10px">
            <thead>
              <tr class="basemanager-table-width">
                <th style="width:5%!important">
                  <label>
                        <input id="checkAll" type="checkbox" class="flat-red">
                    </label>
                </th>
                <th>产品代码</th>
                <th>产品名称</th>
                <th>运作日期</th>
                <th>开始日期</th>
                <th>到期日期</th>
                <th>是否自动续约</th>
                <th>审核状态</th>
              </tr>

            </thead>
            <tbody>
              <tr *ngFor="let item of accountList">
                <td style="text-align:center">
                  <label>
                        <input type="checkbox" class="flat-red subcb">
                    </label>
                </td>
                <td>{{item.code}}</td>
                <td>{{item.name}}</td>
                <td>{{item.rundate}}</td>
                <td>{{item.startdate}}</td>
                <td>{{item.enddate}}</td>
                <td>{{item.isStop}}</td>
                <td>{{item.examine}}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="box-footer clearfix">
          <p class="pull-left">共5个 每页
            <select>
                      <option value="10" class="active">10</option>
                      <option value="20">20</option>
                      <option value="30">30</option>
                      <option value="50">50</option>
                      <option value="100">100</option>
                  </select> 个 当前显示第1页 </p>
          <ul class="pagination pagination-sm no-margin pull-right">
            <li>
              <a>
                    首页
                  </a>
            </li>
            <li>
              <a>
                      上一页
                  </a>
            </li>
            <li class="active">
              <a>
                      1
                  </a>
            </li>
            <li>
              <a>
                      2
                  </a>
            </li>
            <li>
              <a>
                      下一页
                  </a>
            </li>
            <li>
              <a>
                      尾页
                  </a>
            </li>
          </ul>
        </div>
        <!-- /.box-body -->

      </div>
      <!-- /.box-body -->
      <!-- </div> -->
      <!-- /.box -->
    </div>
  </div>
</div>

<!-- 续约modal -->
<div class="modal modal-detail">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">续约管理流程记录信息--修改</h4>
      </div>
      <div class="modal-body">
        <div class="nav-tabs-custom">
          <!-- <ul class="nav nav-tabs" style="margin-left:15px">
            <li class="active"><a href="#tab_3" data-toggle="tab">基本信息</a></li>
          </ul> -->
          <div class="tab-content">
            <div class="tab-pane active" id="tab_3">
              <form class="form-horizontal">
                <div class="form-group" style="margin-top:20px">
                  <label class="col-lg-2 text-right">续约合同:</label>
                  <div class="col-lg-3">
                    <input class="form-control form-fields" type="text" value="易方达纯债1年定期开放债">
                  </div>
                  <label class="col-lg-2 text-right">是否自动续约:</label>
                  <div class="col-lg-3">
                    <select class="form-control">
                      <option value="">是</option>
                      <option value="" selected="selected">否</option>
                    </select>
                  </div>
                </div>
                <div class="form-group" style="margin-top:20px">
                  <label class="col-lg-2 text-right">新的开始日期:</label>
                  <div class="col-lg-3">
                    <div class="input-group date form_datetime">
                      <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </span>
                      <input class="form-control" type="date" style="background: white; cursor: pointer;" value="2013-03-04">
                    </div>
                  </div>
                  <label class="col-lg-2 text-right">期限:</label>
                  <div class="col-lg-3">
                    <select class="form-control">
                      <option value="">1年</option>
                      <option value="">5年</option>
                    </select>
                  </div>
                </div>
                <div class="form-group" style="margin-top:20px">
                  <label class="col-lg-2 text-right">新的到期日期:</label>
                  <div class="col-lg-3">
                    <div class="input-group date form_datetime">
                      <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </span>
                      <input class="form-control" type="date" style="background: white; cursor: pointer;" value="2013-03-04">
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-2 text-right">备注:</label>
                  <div class="col-lg-8">
                    <textarea name="" id="" cols="20" rows="5" style="width:100%">系统根据合同自动发起的续约请求</textarea>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-2 text-right">销售反馈:</label>
                  <div class="col-lg-8">
                    <textarea name="" id="" cols="20" rows="5" style="width:100%"></textarea>
                  </div>
                </div>
              </form>

            </div>
          </div>
        </div>
        <div class="nav-tabs-custom">
          <ul class="nav nav-tabs" style="margin-left:15px">
            <li class="active">
              <a href="#tab_4" data-toggle="tab">合同扫描</a>
            </li>
            <li>
              <a href="#tab_5" data-toggle="tab">合同备忘与协议</a>
            </li>
            <li>
              <a href="#tab_6" data-toggle="tab">账户类</a>
            </li>
            <li>
              <a href="#tab_7" data-toggle="tab">投资类</a>
            </li>
            <li>
              <a href="#tab_8" data-toggle="tab">报备确认函</a>
            </li>
            <li>
              <a href="#tab_9" data-toggle="tab">业绩考核</a>
            </li>
            <li>
              <a href="#tab_10" data-toggle="tab">其他</a>
            </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab_4">
              <form class="form-horizontal">
                <table class="table table-bordered table-hover table-striped">
                  <thead>
                    <tr>
                      <th>附件名称</th>
                      <th>上传者</th>
                      <th>上传时间</th>
                      <th>版本</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>附件名称1</td>
                      <td>岩子峪</td>
                      <td>2016/9/7</td>
                      <td>1.1</td>
                      <td>
                        <a class="" href="javascript:void(0)" title="下载">
                          <i class="glyphicon glyphicon-download-alt"></i>
                        </a>
                        <a class="remove" href="javascript:void(0)" title="查看全部版本" (click)="showHisListModal()">
                          <i class="glyphicon glyphicon-list-alt"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td>附件名称1</td>
                      <td>岩子峪</td>
                      <td>2016/9/7</td>
                      <td>1.1</td>
                      <td>
                        <a class="" href="javascript:void(0)" title="下载">
                          <i class="glyphicon glyphicon-download-alt"></i>
                        </a>
                        <a class="remove" href="javascript:void(0)" title="查看全部版本" (click)="showHisListModal()">
                          <i class="glyphicon glyphicon-list-alt"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td>附件名称1</td>
                      <td>岩子峪</td>
                      <td>2016/9/7</td>
                      <td>1.1</td>
                      <td>
                        <a class="" href="javascript:void(0)" title="下载">
                          <i class="glyphicon glyphicon-download-alt"></i>
                        </a>
                        <a class="remove" href="javascript:void(0)" title="查看全部版本" (click)="showHisListModal()">
                          <i class="glyphicon glyphicon-list-alt"></i>
                        </a>
                      </td>
                    </tr>
                    <tr>
                      <td>附件名称1</td>
                      <td>岩子峪</td>
                      <td>2016/9/7</td>
                      <td>1.1</td>
                      <td>
                        <a class="" href="javascript:void(0)" title="下载">
                          <i class="glyphicon glyphicon-download-alt"></i>
                        </a>
                        <a class="remove" href="javascript:void(0)" title="查看全部版本" (click)="showHisListModal()">
                          <i class="glyphicon glyphicon-list-alt"></i>
                        </a>
                      </td>
                    </tr>

                  </tbody>
                </table>
                <div class="form-group" style="margin-left:15px">
                  <a class="pull-left">上传附件</a>
                </div>
              </form>

            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary"><i class="fa fa-save"></i>保存</button>
        <button type="button" class="btn btn-primary"><i class="fa fa-circle-o-notch"></i>重置</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

<!-- 终止modal -->
<div class="modal modal-stop">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">终止合同</h4>
      </div>
      <div class="modal-body">
        <!-- 到期日期 -->
        <form>
          <div class="form-group">
            <label class="text-right">终止日期</label>
            <div class="input-group date form_datetime">
              <span class="input-group-addon">
                <i class="fa fa-calendar"></i>
              </span>
              <input class="form-control" type="date" style="background: white; cursor: pointer;" value="2013-03-04">
            </div>
            <label for="">终止函</label>
            <input type="file">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary"><i class="fa fa-save"></i>确定</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->